<template>
  <div class="aside-header">
    <h1>Console</h1>
  </div>
  <a-menu  v-model:selectedKeys="menuKey"  mode="inline" style="height: 100%">
    <a-menu-item  key="home">
      <template #icon>
        <HomeOutlined />
      </template>
      <span>控制台</span>
    </a-menu-item>
    <a-menu-item key="article">
      <template #icon>
        <BookOutlined />
      </template>
      <span>文章管理</span>
    </a-menu-item>
    <a-menu-item key="category">
      <template #icon>
        <AppstoreOutlined />
      </template>
      <span>分类管理</span>
    </a-menu-item>
    <a-menu-item key="common">
      <template #icon>
        <CommentOutlined />
      </template>
      <span>评论管理</span>
    </a-menu-item>
    <a-menu-item key="tag">
      <template #icon>
        <TagOutlined />
      </template>
      <span>标签管理</span>
    </a-menu-item>
    <a-menu-item key="website">
      <template #icon>
        <SettingOutlined />
      </template>
      <span>网站设置</span>
    </a-menu-item>
  </a-menu>
</template>

<script setup lang="ts">
import {
  BookOutlined,
  AppstoreOutlined,
  CommentOutlined,
  TagOutlined,
  SettingOutlined,
  HomeOutlined
} from '@ant-design/icons-vue';
import {ref, watch} from 'vue';
import router from "@/router";
const menuKey =  ref<string[]>([(localStorage.getItem("menuKey") || 'home')])
watch(menuKey,()=>{
  localStorage.setItem("menuKey",menuKey.value[0])
  router.push(`/admin/${menuKey.value[0]}`)
})
</script>

<style scoped lang="less">
.aside-header {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, .03);
  border-right: 1px solid rgba(0, 0, 0, .03);
  display: flex;
  justify-content: center;
  align-items: center;
  h1 {
    font-size: 22px;
    color: var(--el-text-color-primary);
    font-weight: 600;
  }
}
</style>